<!-- 可滑动步骤条插件 -->
<template>
	<div class="stepList">
		<div v-for="(i,index) of stepList">
			<div class="step" v-if="active < stepListlength">
				<span class="step_strip" :style="{'background-color': (index < active ? unfinishedColor:'#E0E0E0')}"
					v-if="index != 0"></span>
				<span class="step_box" :style="{'background-color': (index < active ? unfinishedColor:'#E0E0E0')}"></span>
				<span class="step_title">{{i}}</span>
			</div>
			
			<div class="step" v-else>
				<span class="step_strip" :style="{'background-color': accomplishColor}"
					v-if="index != 0"></span>
				<span class="step_box" :style="{'background-color': accomplishColor}"></span>
				<span class="step_title">{{i}}</span>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		props: ['active', 'stepList', 'unfinishedColor','accomplishColor'],
		data() {
			return {
				
			}
		},
		computed:{
			stepListlength:function(){
				return this.stepList.length;//进度条步骤次数，用于判断是否已经完成
			}
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.stepList {
		display: flex;
		/* justify-content: center; */
		width: 100%;
		height: 1rem;
		margin: auto;
		overflow: auto;
		scrollbar-width: none;
		/* firefox */
		-ms-overflow-style: none;
		padding-left: .3rem;
		/* IE 10+ */
	}

	.stepList::-webkit-scrollbar {
		display: none;
		/* Chrome Safari */
	}

	.step {
		display: flex;
		width: 2.4rem;
		height: .8rem;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
		position: relative;
	}

	.step_strip {
		display: block;
		height: 2px;
		width: 2.4rem;
		position: absolute;
		left: -2.2rem;
		top: .13rem;
	}

	.step_box {
		display: block;
		width: .2rem;
		height: .2rem;
		border-radius: 50%;
		z-index: 100;
	}

	.step_title {
		display: flex;
		width: 3rem;
		font-size: .3rem;
		color: #8C9091;
		transform: translateX(-.2rem);
	}
</style>
